<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../css/weui.css">
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/question.css">
    <script type="text/javascript" src='../js/adaptive.js'></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
    <title>报名</title>
</head>
<body >
     <div class="questionBanner">
        <p class="questionTop">第 <span class="questionNum">1</span> 题</p>
        <p class="questionState">
        <span class="questionStateNum">1</span>/60
        </p>
         <div class="questionItem">
             <div class="questions" id="questions">
           
            </div>
            <div class="answer"  id="answer"></div>
        </div>
        <p class="clock" id="clock"> 
            <span class="hours" id="hours"></span>
            <span class="miniute" id="miniute"></span>
            <!-- <span class="second" id="second"></span> -->
        </p>
    </div>
    <div class="answerTips">
            <!-- <img src="" alt=""> -->
            <div class="answerTipsBg">

            </div>
    </div>
    <!-- 弹窗 -->
      <div class="js_dialog" id="androidDialog1">
            <div class="weui-mask"></div>
            <div class="weui-dialog weui-skin_android">
             <p class="weui_Tips">温馨提示</p>
                <div class="weui-dialog__bd">
                  
                </div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default weui_confim">确认</a>
                </div>
            </div>
        </div>
    <script>

        $(function(){
            var  timerID  =  null;
            var  timerRunning  =  false;  
            var startTimeStamp =0;
            var endTimeStamp =0;
            var totalSecond=0
            var totalHours=0;
            var totalMin =0;
            var totalSec =0;
            var id= window.location.href.split('=')[1] ?window.location.href.split('=')[1] :1
            console.log(id)
            var rightNum =''
            var count =0;
            // 倒计时

             function resetTime(time){
                    var timer=null;
                    var t=time;
                    var m=0;
                    var s=0;
                    startTimeStamp =+new Date();
                    m=Math.floor(t/60%60);
                    m<10&&(m='0'+m);
                    s=Math.floor(t%60);
                    function countDown(){
                        s--;
                        s<10&&(s='0'+s);
                        if(s.length>=3){
                            s=59;
                            m="0"+(Number(m)-1);

                        }
                        if(m.length>=3){
                            m='00';
                            s='00';
                            clearInterval(timer);
                            $("#androidDialog1").show()
                            $('.weui-dialog__bd').html('答题时间到')

                        }
                    $('#hours').html(m+":")
                    $('#miniute').html(s)
                }
            timer=setInterval(countDown,1000);
        }
            //时间到了之后 点击确定按钮  会直接到失败页面
            $('.weui_confim').click(function(){
                alert(123)
                window.location = 'resultFail.html?count='+count+'&totalSecond='+600+'&id='+id
            })
            resetTime(10);
            function getQuestionItem(id){
                $.ajax({
                    url:'http://192.168.2.79/api/questions/getQuestion',
                    type:'GET',
                    dataType:'json',
                    data:{
                        id:id
                    },
                    success:function(res){
                        if(res.code ==1){
                            var result =res.msg;
                            console.log(res.msg)
                            var rightAnswer =result.answer;
                            if(rightAnswer =='A'){
                                rightNum =0
                            }else if(rightAnswer =='B'){
                                rightNum =1
                            }else if(rightAnswer =='C'){
                                rightNum =2
                            }else if(rightAnswer =='D'){
                                rightNum =3
                            }
                            $('#questions').html(result.content)
                            $('.questionStateNum').html(id)
                            $('.questionNum').html(id)
                            $('#questions').attr('data-answer',rightNum)
                            var options =result.options.split(';')
                            var optionsItem =''
                            for(var i=0;i<options.length;i++){
                                optionsItem += '<p>'+options[i]+'</p>'
                            }
                            $('#answer').html(optionsItem);
                            $('#answer p').each(function(index,el){
                                $(el).click(function(){
                                        if($(this).index()==rightNum){
                                            $('.answerTips .answerTipsBg').css('background-image','url(../images/RightAnswer.png)')
                                            $('.answerTips').addClass('active')
                                            count++;
                                            }else {
                                                if(rightNum ==0){
                                                    $('.answerTips .answerTipsBg').css('background-image','url(../images/A.png)')
                                                    $('.answerTips').addClass('active')
                                                  
                                                }else if(rightNum ==1){
                                                  
                                                    $('.answerTips .answerTipsBg').css('background-image','url(../images/B.png)')
                                                    $('.answerTips').addClass('active') 
                                                }else if(rightNum ==2){
                                                 
                                                    $('.answerTips .answerTipsBg').css('background-image','url(../images/C.png)')
                                                    $('.answerTips').addClass('active') 
                                                }else if(rightNum ==3){
                                                  
                                                    $('.answerTips .answerTipsBg').css('background-image','url(../images/D.png)')
                                                    $('.answerTips').addClass('active')  
                                                }
                                            }
                                        
                                })
                         })
                        }
                    },
                    error:function(err){
                        console.log(err)
                    },
                })
            };
            $('.answerTips').find('.answerTipsBg').click(function(){
                $('.answerTips').removeClass('active')
                $('.answerTips').find('.answerTipsBg').css('background-image','')
                if(id==20 ||id==40||id==60){
                        //最后一题计算答题时间
                    $('#answer p').each(function(index,el){
                            $(el).click(function(){
                                if($(this).index()==rightNum){
                                            // $('.answerTips').find('.answerTipsBg').attr('src','../images/RightAnswer.png')
                                            $('.answerTips .answerTipsBg').css('background-image','url(../images/RightAnswer.png)')
                                            $('.answerTips').addClass('active')
                                            count++;
                                            }else {
                                                if(rightNum ==0){
                                                    $('.answerTips .answerTipsBg').css('background-image','url(../images/A.png)')
                                                    $('.answerTips').addClass('active')
                                                    // $('.answerTips').find('img').attr('src','../images/A.png')
                                                   // $('.answerTips').addClass('active')  
                                                }else if(rightNum ==1){
                                                    // $('.answerTips').find('img').attr('src','../images/B.png')
                                                    // $('.answerTips').addClass('active') 
                                                    $('.answerTips .answerTipsBg').css('background-image','url(../images/B.png)')
                                                    $('.answerTips').addClass('active') 
                                                }else if(rightNum ==2){
                                                    // $('.answerTips').find('img').attr('src','../images/C.png')
                                                    // $('.answerTips').addClass('active') 
                                                    $('.answerTips .answerTipsBg').css('background-image','url(../images/C.png)')
                                                    $('.answerTips').addClass('active') 
                                                }else if(rightNum ==3){
                                                    // $('.answerTips').find('img').attr('src','../images/D.png')
                                                    // $('.answerTips').addClass('active')
                                                    $('.answerTips .answerTipsBg').css('background-image','url(../images/D.png)')
                                                    $('.answerTips').addClass('active')  
                                                }
                                            }
                                    
                            })
                        })
                    endTimeStamp = +new Date()
                    console.log(endTimeStamp)
                    totalSecond = (endTimeStamp-startTimeStamp)/1000
                    totalHours =0;
                    totalMin=0;
                    totalSec=0;
                    endTimeStamp =0;    
                    startTimeStamp =0;
                    // stopclock()
                    if(count>=16){
                        window.location ='result.html?count='+count+'&totalSecond='+totalSecond+'&id='+id
                    } else{
                        window.location ='resultFail.html?count='+count+'&totalSecond='+totalSecond+'&id='+id
                    }
                   
                    return false
                }
                 id =id*1+1;
                 getQuestionItem(id)
            })
            //加载第一页数据
            // getQuestionItem(id);
        })
    </script>
</body>
</html>